<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css"/>
	<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

<script type="text/javascript">

	$(function(){
		//日历
		$('.mydate').datetimepicker({
			language:'zh-CN',
			format:'yyyy-mm-dd',
			minView:'month',
			initialDate:new Date(),
			autoclose:true,
			todayBtn:true,
			clearBtn:true
		});

		//创建按钮点击事件
		$('#createActivityBtn').click(function () {
			//清楚数据
			/*$('#create-marketActivityOwner').val("");
			$('#create-marketActivityName').val("");
			$('#create-startTime').val("");
			$('#create-endTime').val("");
			$('#create-cost').val("");
			$('#create-describe').val("");*/

			$('#createActivityForm').get(0).reset();

			$('#createActivityModal').modal('show');
		});

		//保存创建按钮点击事件
		$('#saveCreateActivityBtn').click(function () {
			var owner = $('#create-marketActivityOwner').val();
			var name = $.trim($('#create-marketActivityName').val());
			var startDate = $('#create-startTime').val();
			var endDate = $('#create-endTime').val();
			var cost = $.trim($('#create-cost').val());
			var description = $('#create-describe').val();

			if(owner == ''){
				alert('所有者不能为空');
				return;
			}

			if(name == ""){
				alert('名称不能为空');
				return;
			}

			if(startDate!=""&&endDate!=""){
				if(endDate<startDate){
					alert('结束日期不能比开始日期小');
					return;
				}
			}

			var regExp = /^(([1-9]([0-9]{0,}))|0)$/;

			if(!regExp.test(cost)){
				alert('成本只能是正整数');
				return;
			}

			$.ajax({
				url:'workbench/activity/saveCreateActivity.do',
				data:{
					owner:owner,
					name:name,
					startDate:startDate,
					endDate:endDate,
					cost:cost,
					description:description
				},
				type:'post',
				dataType:'json',
				success:function (res) {
					if(res.code=='1'){
						//成功
						$('#createActivityModal').modal('hide');
						//刷新市场活动列,显示第一页数据
						queryActivityByConditionForPage(1,$('#pagination').bs_pagination('getOption','rowsPerPage'));
					}else if(res.code=='0'){
						//失败
						alert(res.message);

						$('#createActivityModal').modal('show');
					}
				}
			});
		});

		$('#queryActivityByConditionForPageBtn').click(function(){
			queryActivityByConditionForPage(1,$('#pagination').bs_pagination('getOption','rowsPerPage'));
		});

		//发送请求,拿取活动数据
		queryActivityByConditionForPage(1,10);

		$('#checkAll').click(function(){
			$('#activityList input[type="checkBox"]').prop('checked',$(this).prop('checked'));
		});

		$('#activityList').on('click',"input",function(){
			$('#checkAll').prop('checked',$('#activityList input[type="checkBox"]:checked').size()==$('#activityList input[type="checkBox"]').size()?true:false);
		});

		$('#deleteActivityByIdsBtn').click(function(){
			if($('#activityList input[type="checkbox"]:checked').size()==0){
				alert('请选择要删除的活动');
				return;
			}

			if(window.confirm("您确定要删除吗?")){

				var ids = '';

				$('#activityList input[type="checkbox"]:checked').each(function(i,obj){
					ids += 'ids=' + obj.value + '&';
				});

				ids = ids.substring(0,ids.length-1);

				$.ajax({
					url:'workbench/activity/deleteActivityByIds.do',
					data:ids,
					dataType:'json',
					type:'post',
					success:function(res){
						if(res.code=='0'){
							alert(res.message);
						}else if(res.code=='1'){
							queryActivityByConditionForPage(1,$('#pagination').bs_pagination('getOption','rowsPerPage'));
						}
					}
				});
			}
		});

		$('#showUpdateActivityByIdModalBtn').click(function(){
			if($('#activityList input[type="checkbox"]:checked').size()!=1){
				alert('只能选择一条数据');
				return;
			}

			var id = 'id=' + $('#activityList input[type="checkbox"]:checked').val();

			$.ajax({
				url:'workbench/activity/queryActivityById.do',
				data:id,
				dataType:'json',
				type:'post',
				success:function(res){
					if(res.code=='0'){
						alert(res.message);
					}else if(res.code=='1'){
						$('#edit-id').val(res.retData.id);
						$('#edit-marketActivityOwner').val(res.retData.owner);
						$('#edit-marketActivityName').val(res.retData.name);
						$('#edit-startTime').val(res.retData.startDate);
						$('#edit-endTime').val(res.retData.endDate);
						$('#edit-cost').val(res.retData.cost);
						$('#edit-describe').val(res.retData.description);
					}
				}
			});

			$('#editActivityModal').modal('show');
		});

		$('#updateActivityByIdBtn').click(function(){
			var id = $('#edit-id').val();
			var owner = $('#edit-marketActivityOwner').val();
			var name = $.trim($('#edit-marketActivityName').val());
			var startDate = $('#edit-startTime').val();
			var endDate = $('#edit-endTime').val();
			var cost = $.trim($('#edit-cost').val());
			var description = $('#edit-describe').val();

			if(owner == ''){
				alert('所有者不能为空');
				return;
			}

			if(name == ""){
				alert('名称不能为空');
				return;
			}

			if(startDate!=""&&endDate!=""){
				if(endDate<startDate){
					alert('结束日期不能比开始日期小');
					return;
				}
			}

			var regExp = /^(([1-9]([0-9]{0,}))|0)$/;

			if(!regExp.test(cost)){
				alert('成本只能是正整数');
				return;
			}

			$.ajax({
				url: 'workbench/activity/updateActivityById.do',
				data: {
					id:id,
					owner: owner,
					name: name,
					startDate: startDate,
					endDate: endDate,
					cost: cost,
					description: description
				},
				type: 'post',
				dataType: 'json',
				success: function (res) {
					if (res.code == '1') {
						//成功
						$('#editActivityModal').modal('hide');

						queryActivityByConditionForPage($('#pagination').bs_pagination('getOption', 'currentPage'), $('#pagination').bs_pagination('getOption', 'rowsPerPage'));
					} else if (res.code == '0') {
						//失败
						alert(res.message);

						$('#editActivityModal').modal('show');
					}
				}
			});
		});

		$('#exportActivityAllBtn').click(function(){
			window.location.href='workbench/activity/downloadAllActivity.do';
		});

		$('#exportActivityXzBtn').click(function(){
			if($('#activityList input[type="checkbox"]:checked').size()==0){
				alert('请选择要导出的数据');
				return;
			}

			var ids = '';

			$('#activityList input[type="checkbox"]:checked').each(function(){
				ids += 'ids=' + this.value + '&';
			});

			ids = ids.substring(ids,ids.length-1);

			window.location.href='workbench/activity/downloadActivityByIds.do?' + ids;
		});

		$('#showUploadFileModalBtn').click(function(){
			$('#importActivityModal').modal('show');
		});

		$('#importActivityBtn').click(function(){
			var fileName = $('#activityFile').val();
			var suffix = fileName.substr(fileName.lastIndexOf('.')+1).toLocaleLowerCase();
			if(suffix != 'xls'){
				alert('只支持xls文件');
				return;
			}

			var file = $('#activityFile').get(0).files[0];

			if(file.size > 1024*1024*5){
				alert('文件不能大于5mb');
				return;
			}

			var formData = new FormData();
			formData.append("activityFile",file);

			$.ajax({
				url:'workbench/activity/fileupload.do',
				data:formData,
				processData:false,
				contentType:false,
				dataType:'json',
				type:'post',
				success:function(res){
					if(res.code=='1'){
						alert('成功导入'+res.retData+'条记录');
						$('#importActivityModal').modal('hide');
						queryActivityByConditionForPage(1,$('#pagination').bs_pagination('getOption','rowsPerPage'));
					}else if(res.code=='0'){
						alert(res.message);
						$('#importActivityModal').modal('show');
					}
				}
			});
		});
	});

	function queryActivityByConditionForPage(pageNo,pageSize) {
		var name = $.trim($('#name').val());
		var owner = $.trim($('#owner').val());
		var startDate = $('#startTime').val();
		var endDate = $('#endTime').val();

		if(startDate!=""&&endDate!=""){
			if(endDate<startDate){
				alert('结束日期不能比开始日期小');
				return;
			}
		}

		$.ajax({
			url:'workbench/activity/queryActivityByConditionForPage.do',
			data:{
				name:name,
				owner:owner,
				startDate:startDate,
				endDate:endDate,
				pageNo:pageNo,
				pageSize:pageSize
			},
			dataType:'json',
			type:'post',
			success:function(res){
				//$('#totalRowsB').html(res.totalRows);

				var totalPages = 1;
				if(res.totalRows%pageSize==0){
					totalPages=res.totalRows/pageSize;
				}else{
					totalPages=parseInt(res.totalRows/pageSize)+1;
				}

				$('#pagination').bs_pagination({
					currentPage:pageNo,

					rowsPerPage:pageSize,
					totalRows:res.totalRows,
					totalPages:totalPages,

					visiblePageLinks:5,

					showGoToPage:true,
					showRowsPerPage:true,
					showRowsInfo:true,

					onChangePage:function (event,pageObj) {
						queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
					}
				});

				$('#activityList').empty();

				var htmlStr = '';

				$.each(res.activityList,function(i,n){
					htmlStr += '<tr class="active">';
					htmlStr += '<td><input type="checkbox" value=\'' + n.id +'\' /></td>';
					htmlStr += '<td><a style="text-decoration: none; cursor: pointer;" onclick=\'window.location.href="workbench/activity/detailActivity.do?id=' + n.id + '"\'>' + n.name + '</a></td>';
					htmlStr += '<td>' + n.owner + '</td>';
					htmlStr += '<td>' + n.startDate + '</td>';
					htmlStr += '<td>' + n.endDate + '</td>';
					htmlStr += '</tr>';
					$('#activityList').html(htmlStr);
				});

				$('#checkAll').prop('checked',false);

				/*$('#activityList input[type="checkBox"]').click(function(){
					$('#checkAll').prop('checked',$('#activityList input[type="checkBox"]:checked').size()==$('#activityList input[type="checkBox"]').size()?true:false);
				});*/
			}
		});
	}
	
</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form" id="createActivityForm">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
									<c:forEach items="${requestScope.userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-startTime" readonly>
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-endTime" readonly>
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
									<c:forEach items="${requestScope.userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="edit-startTime" value="2020-10-10">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="edit-endTime" value="2020-10-20">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateActivityByIdBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 导入市场活动的模态窗口 -->
    <div class="modal fade" id="importActivityModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input type="file" id="activityFile">
                    </div>
                    <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                        <h3>重要提示</h3>
                        <ul>
                            <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                            <li>给定文件的第一行将视为字段名。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default">关闭</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text"  id="owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control mydate" type="text" id="startTime" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control mydate" type="text" id="endTime">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="queryActivityByConditionForPageBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" id="createActivityBtn" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="showUpdateActivityByIdModalBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteActivityByIdsBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-default" id="showUploadFileModalBtn"><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                    <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                    <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
                </div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="activityList">

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">

				<div id="pagination">

				</div>

				<%--<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>
				</div>--%>

				<%--<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>--%>
			</div>
			
		</div>
		
	</div>
</body>
</html>